<template>
	<view class="service-panel">
		<!-- 关闭按钮 -->
		<!-- 关闭按钮 -->
		<uni-icons
			@click="$emit('close')"
			class="close"
			type="closeempty"
			size="30"
		></uni-icons>
		<!-- 标题 -->
		<view class="title">服务说明</view>
		<!-- 内容 -->
		<view class="content">
			<view class="item">
				<view class="dt">无忧退货</view>
				<view class="dd">
					自收到商品之日起30天内，可在线申请无忧退货服务（食品等特殊商品除外）
				</view>
			</view>
			<view class="item">
				<view class="dt">快速退款</view>
				<view class="dd">
					收到退货包裹并确认无误后，将在48小时内办理退款，
					退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账
				</view>
			</view>
			<view class="item">
				<view class="dt">满88元免邮费</view>
				<view class="dd">
					单笔订单金额(不含运费)满88元可免邮费，不满88元， 单笔订单收取10元邮费
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.service-panel {
	padding: 0 30rpx;
	border-radius: 10rpx 10rpx 0 0;
	position: relative;
	background-color: #fff;
}

.title {
	line-height: 1;
	padding: 40rpx 0;
	text-align: center;
	font-size: 32rpx;
	font-weight: normal;
	border-bottom: 1rpx solid #ddd;
	color: #444;
}

.close {
	position: absolute;
	right: 24rpx;
	top: 24rpx;
}

.content {
	padding: 20rpx 20rpx 100rpx 20rpx;

	.item {
		margin-top: 20rpx;
	}

	.dt {
		margin-bottom: 10rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		position: relative;

		&::before {
			content: '';
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			background-color: #eaeaea;
			transform: translateY(-50%);
			position: absolute;
			top: 50%;
			left: -20rpx;
		}
	}

	.dd {
		line-height: 1.6;
		font-size: 26rpx;
		color: #999;
	}
}
</style>
